
<?php
/*
	WELCOME to this great peace of code!

		at first we ar going to define our instruments

		$instruments = array( TITLE  => IDENTIFIER );


		thats all, great isn't it?!
*/

	$instruments = array('Drums'=>'drums','Glocken'=>'klavier','Gesang'=>'gesang','Shakers'=>'shakers','Flute'=>'keineahnung');
	
?>


<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="UTF-8">
<title>Weather Widget test</title>
<style type="text/css">
body{
	margin:0;
	font-family:Georgia,"Times New Roman",Times,serif;
	color:#000000;
	font-size:12px;
	background-color:#f0f2f3;
	height:100%;
}

.rbroundbox { background: url(images/nt.gif) repeat; }
.rbtop div { background: url(images/tl.gif) no-repeat top left; }
.rbtop { background: url(images/tr.gif) no-repeat top right; }
.rbbot div { background: url(images/bl.gif) no-repeat bottom left; }
.rbbot { background: url(images/br.gif) no-repeat bottom right; }

/* height and width stuff, width not really nessisary. */
.rbtop div, .rbtop, .rbbot div, .rbbot {
height: 7px;
font-size: 1px;
}
.rbcontent { margin: 6px; display:none;}
.rbroundbox { float:left; margin: 1em auto; }
.tag{font-size:9px;
font-weight:bold;
letter-spacing:0.2em;
text-transform:uppercase;}
.data{color:#2f2f2f; font-weight:normal;margin-left:10px}
#error{color:crimson;}



#content {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	background-image:url('img/pagebg.png');
	width:650px;
	padding: 15px 16px 10px 16px;
	overflow:auto;
}

.instrument {
	overflow:auto;
	background-color:#efefef;
	float:left;
	padding:5px;
	margin:10px;
	width:250px;

	border:1px solid #000000;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;

}
.header {
	color:#ffffff;
	font-weight:bold;
	margin:-5px -5px 10px -5px;
	padding-left:5px;
	height:17px;
	background-image:url('img/headbg.gif');
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
    -webkit-border-radius-topleft: 5px;
	-webkit-border-radius-topright: 5px;
    -khtml-border-radius-topleft: 5px;
	-khtml-border-radius-topright: 5px;
	border-radius-topleft: 5px;
	border-radius-topright: 5px;

}
#footer {
	position:relative;
	margin-left:auto;
	margin-right:auto;

	background-image:url('img/footerbg.png');
	height:10px;
	width:682px;
}

#explanation {
	padding:10px;
	background-color:#F2E5CE;
	border:1px solid #F2D4A0;
	margin:0 20px 20px 20px;
}

#musicbutton a {
	color:#ffffff;
	text-decoration:none;
}
#musicbutton a:hover {
	color:#EFEFEF;
	text-decoration:none;
}

#musicbutton {
	clear:both;
	float:right;
	margin:7px 20px 0 0;
	position:relative;
	background-image:url('img/buttonbg.png');
	color:#ffffff;
	font-weight:bold;
	font-size:16px;
	height:22px;
	width:245px;
	padding:3px 10px 0 10px;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

img {
	border:0;
}

.controlimg {
	position:relative;
	display:none;
	top: 6px;
	left:2px;
	padding: 0 2px 0 2px;
}

#instrumentscontainer {
	margin: 0 0 0 40px;
}

</style>
<script src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{

var musicisplaying = false;
var playing = new Array();


 var childData	= function(selector, arg)
 {
 	return selector.find(arg).attr('data');
 }
var sendAjax =function(where,inputfield){

$('#i'+inputfield+' #data, #i'+inputfield+' #data#error').animate({
		    height: ['hide', 'swing'],
		    opacity: 'hide'
		  }, 700, 'linear', function() {
		      $(this).hide();
		  });;	


$.ajax({
   type: "GET",
   data:"where="+where,
   url: "google-weather.php",
    success: function(data){
	
    forecast	= $(data).find('forecast_information');
	cCondition	= $(data).find('current_conditions');
	
	city	= childData(forecast, 'city');
	if(city!=undefined)
	{
		date	= childData(forecast, 'forecast_date');

		condition	= childData(cCondition, 'condition');
		condition_icon	= childData(cCondition, 'icon');
		tempC	= childData(cCondition, 'temp_c');
		humidity	= childData(cCondition, 'humidity');
		icon	= childData(cCondition, 'icon');
		wind	= childData(cCondition, 'wind_condition');
		$('#i'+inputfield+' #city').text(city);
		$('#i'+inputfield+' #date').text(date);
		$('#i'+inputfield+' #condition').text(condition);
		$('#i'+inputfield+' #condition_icon').text(condition_icon);
		$('#i'+inputfield+' #tempC').text(tempC+' C');
		$('#i'+inputfield+' #humidity').text(humidity);
		$('#i'+inputfield+' #wind').text(wind);
		$('#i'+inputfield+' #icon').attr({'src':'http://www.google.com'+icon})

		if (inputfield!="all")
			$('#i'+inputfield+' #data').animate({
			    height: ['show', 'swing'],
			    opacity: 'show'
			  }, 700, 'linear', function() {
			      $(this).show();
			  });


		if (musicisplaying) {
			// just in case pause is visible
			if (!isPlaying(inputfield)) {
				$('#i'+inputfield+' #pause').hide();
			}
			// show play button
			$('#i'+inputfield+' #play').show();
		}
		
	}
	else
	{
		if (isPlaying(inputfield)) {
			//pauseChuck(inputfield);
			//$('#i'+inputfield+' #pause').hide();
		}

	}
	
	}
	
 });
}

var sendChuck =function(obj){
$.ajax({
   type: "GET",
   data: obj,
   url: "send.php",
    success: function(data){
   		//m8b a status msg, but nothing else to do here	
	}
	
 });
}
var pauseChuck =function(name){
removefromlist(name);
$('#i'+name+' #pause').hide();

$.ajax({
   type: "GET",
   data: 'pause='+name,
   url: "send.php",
    success: function(data){
   		//m8b a status msg, but nothing else to do here	
	}
	
 });
}


$('.instrumentinput').keyup(function(event)
{
	inputfield	= event.target;
	
	where = inputfield.value;
	
	//if "all instr": update other text fields
		if(inputfield.id =="all")
		{

		<?php
			foreach ($instruments as $value) {
				echo "document.getElementById('$value').value = document.getElementById('all').value;";
			}
		?>
		}
		else
		{
			//delete one for all
			document.getElementById("all").value ="";
			sendAjax("", "all");
		}
		
	if (where.length>2) {
		if(inputfield.id == "all")
		{
			sendAjax(where,inputfield.id);
			<?php foreach ($instruments as $value) {
				echo "sendAjax(where,'$value');";
			} ?>
		}
		else
			sendAjax(where,inputfield.id);
	} else {
		
		
		if(inputfield.id == "all")
		{
			
			var ids = new Array();
				<?php 
				$i=0;
				foreach($instruments as $value){ 
					echo "ids[$i]='$value';";
					$i++;
				} 
				?>
			
			for(var id in ids)
			{
				var vis = $('#i'+id+' #data').is(":visible");
				//if (musicisplaying && isPlaying(inputfield.id)) pauseChuck(id);
				$('#i'+id+' #data').animate({
				    height: ['hide', 'swing'],
				    opacity: 'hide'
				  }, 700, 'linear', function() {
				      $(this).hide();
				  });;	
		
				$('#i'+id+' #play').hide();
			}
		}else
		{
			var vis = $('#i'+inputfield.id+' #data').is(":visible");
			//if (musicisplaying && isPlaying(inputfield.id)) pauseChuck(inputfield.id);
			$('#i'+inputfield.id+' #data').animate({
			    height: ['hide', 'swing'],
			    opacity: 'hide'
			  }, 700, 'linear', function() {
			      $(this).hide();
			  });;	
	
			$('#i'+inputfield.id+' #play').hide();
		}
	}
})

$('.pause').click(function(event)
{
	inputfield	= event.currentTarget.parentNode.parentNode;
	inputfield = inputfield.id.substr(1,inputfield.id.length);
	if (inputfield == 'all') {
		<?php foreach ($instruments as $value) {
				echo "pauseChuck('$value');";
			} ?>
	}
	else {
		pauseChuck(inputfield);
	}
	$('#i'+inputfield+' #play').show();
})

$('.play').click(function(event)
{

	inputfield	= event.currentTarget.parentNode.parentNode;
	inputfield = inputfield.id.substr(1,inputfield.id.length);

	//if(isPlaying(inputfield)) pauseChuck(inputfield);
	var data=new Object();
	var newdata=getInstrumentData('i'+inputfield);
	data[inputfield] = newdata;
	sendChuck(data);

	if (inputfield == 'all') {
		<?php foreach ($instruments as $value) {
				echo "addtolist('$value');";
			} ?>
	}
	else {
		addtolist(inputfield);
		
	}
	$('#i'+inputfield+' #play').hide();
})

$('#musicbutton').click(function()
{
	
	if (!musicisplaying) {
		musicisplaying = true;	
		var data=new Object();
	
		<?php
			foreach ($instruments as $value) {	
				echo "newdata=getInstrumentData('i".$value."');";
				echo "if(newdata.length>0) {";
				echo "data['".$value."']=newdata;";
				echo "addtolist('".$value."');";
				echo "}";
				
			}
		?>
		sendChuck(data);

		$('#musicbutton').hide('slow');
	} 
	
})

$('#iall').click(function(event)
{	
	if (event.target.id != "all") {
		$('#iall .city').toggle('fast',function() {
			if (!$('#iall .city').is(':visible')) {
				clearAllFields(true);
				
			} else {
				fillAllFieldsWith($('#all').val());
				$('#all').focus();
			}
		});
		$('#iall .explanation').toggle('fast');
	}
})


var clearAllFields = function(playingexception) {
	<?php foreach ($instruments as $value) {
			echo "if (!playingexception || (playingexception && !isPlaying('$value')) ){";
				echo "$('#$value').val('');";
				echo "sendAjax('','$value');";
			echo "}";
	
	} ?>
	$('.play').hide();
}
var fillAllFieldsWith = function(val) {
	<?php foreach ($instruments as $value) {
			echo "$('#$value').val(val);";
			echo "sendAjax(val,'$value');";
	} ?>
	$('.play').hide();
}


var addtolist =function(instrument){
	if ($.inArray(instrument,playing)<0) {
		playing.push(instrument);
	}
}
var removefromlist =function(instrument){
	index=$.inArray(instrument,playing);
	if (index>-1) {
		playing.splice(index,1);
	}
}

var isPlaying = function(instrument) {
	index=$.inArray(instrument,playing);
	if (index<0) {
		return false;
	}
	return true;
}





/*

	THIS DEFINES THE VALUES TO BE SENT

*/

var getInstrumentData = function(name) {
	var ar = new Array();
	if ($('#'+name+' #data').is(":visible")) {
		$('#'+name+' #pause').show();
		//$('#idrums #stop').show();
		
		// condition as string
		//ar[0] = $('#'+name+' #condition').html();
		// condition-icon 
		if ( $('#'+name+' #condition_icon').html()!="")
		ar[0] = $('#'+name+' #condition_icon').html().split("/ig/images/weather/")[1].split('.gif')[0];
		else 
		ar[0] = "mostly_cloudy";
		// temperature in c
		ar[1] = ($('#'+name+' #tempC').html().split(" "))[0];	
		// humidity
		ar[2] = ($('#'+name+' #humidity').html().split(" "))[1].split("%")[0];	
		
		var wind = ($('#'+name+' #wind').html().split(" "));
		// wind direction
		ar[3] = wind[3];
		// wind speed
		ar[4] = wind[1];

	}
	return ar;
}


});
</script>
</head>

<body>


<div id="content">
	<img src="img/logo.png" /><br><br>


	<div id="explanation">
		To listent to your own weather music you need to download <a href="../data.zip">this</a> Zip file (ChucK file & sounds) and run it on your machine. We recommend <a href="http://audicle.cs.princeton.edu/mini/">miniAudicle</a> for this purpose. Don't forget to open port 6449 and to forward it if you are behind a router / firewall.<br />
		Just enter the name of a city into one of the texfields to add it to a certain instrument. If you want to hear your amazing weathermusic just press the button below. From now on you can change your music on the fly.<br> Have fun!
	</div>

	<div id="instrumentscontainer">
		
	<?php

		allinstruments();
		
		$number=0;		
		foreach ($instruments as $key => $value) {
			if ($number%2==0) $clear = true;
			else $clear = false;
			makeinstrument($key,$value,$clear);
			$number++;
		}
		
	//	sizeof_instruments = sizeof($instruments);
		
	?>

		
</div>
	<div id="musicbutton"><a href="javascript://">go and convert me into music</a></div>
</div>
<div id="footer"></div>




</body>
</html>


<?php 
function makeinstrument($title,$name,$clear) {
?>
		<!-- instrument-->
		<div id="i<?php echo $name?>" class="instrument" <?php if($clear) echo "style=\"clear:both\""; ?>>
			<div class="header"><?php echo $title?></div>
			<div class="city"> <input type="text" id="<?php echo $name?>" class="instrumentinput" /> 
				<span id="play" class="play controlimg"><a href="javascript://"><img src="img/play.png"/></a></span>
				<span id="pause" class="pause controlimg"><a href="javascript://"><img src="img/pause.png"/></a></span>
				<span id="stop" class="controlimg"><a href="javascript://"><img src="img/stop.png"/></a></span><br />
			</div>
			<div class="weather">	
				<div class="rbroundbox">
					<div class="rbcontent tag" id="error">Falsche oder zuwenig Informationen</div>
					<div class="rbcontent tag" id="data">
						<span><img src="" id="icon" /></span><br />
						<span>City -</span><span class="data" id="city"></span><br />
						<span>Date -</span><span class="data" id="date"></span><br />
						<span>Condition -</span><span class="data" id="condition"></span><br />
						<span style="display:none;" id="condition_icon"></span>
						<span>Temperature -</span><span class="data" id="tempC"></span><br />
						<span>Humidity -</span><span class="data" id="humidity"></span><br />
						<span>Wind -</span><span class="data" id="wind"></span><br />
					</div>
				</div>
			</div>
		</div>
		<!-- instrument ende -->

<?php
}

?>

<?php 
function allinstruments() {
?>



		<div id="iall" class="instrument">
			<div class="header">One 4 all</div>
			<div class="explanation">Click here to just use one city for all the instruments</div>
			<div class="city" style="display:none"> <input type="text" id="all" class="instrumentinput" /> 
				
			</div>
			<div class="weather" style="display:none;visibility:hidden;">	
				<div class="rbroundbox">
					<div class="rbcontent tag" id="error">Falsche oder zuwenig Informationen</div>
					<div class="rbcontent tag" id="data">
						<span><img src="" id="icon" /></span><br />
						<span>City -</span><span class="data" id="city"></span><br />
						<span>Date -</span><span class="data" id="date"></span><br />
						<span>Condition -</span><span class="data" id="condition"></span><br />
						<span style="display:none;" id="condition_icon"></span>
						<span>Temperature -</span><span class="data" id="tempC"></span><br />
						<span>Humidity -</span><span class="data" id="humidity"></span><br />
						<span>Wind -</span><span class="data" id="wind"></span><br />
					</div>
				</div>
			</div>
		</div>

<?php
}

?>